<template>
  <u-container-layout>
    <zlrt-table :p="orderCtx">
      <template #before>
        <zlrt-search :p="orderCtx">
          <template #projectName>
            <el-input
              v-model="orderCtx.otherFilter.projectName"
              placeholder="请输入项目名称"
            />
          </template>
          <template #blueprintName>
            <el-input
              v-model="orderCtx.otherFilter.blueprintName"
              placeholder="请输入图纸名称"
            />
          </template>
        </zlrt-search>
        <div class="tool-bar">
          <el-button
            type="danger"
            v-hasPermit="['wms-order:requirement:del']"
            icon="Delete"
            :disabled="!orderCtx.selected.length"
            @click="orderCtx.batchDelete()"
          >
            批量删除
          </el-button>
          <span style="float: right">
            <el-upload
              style="
                display: inline-block;
                position: relative;
                top: 4px;
                margin-right: 10px;
              "
              v-model:file-list="importCtx.importFiles"
              action="#"
              :http-request="
                (options) => importCtx.other.importMultiple(options)
              "
              :show-file-list="false"
              :limit="1"
            >
              <el-button
                type="warning"
                :loading="importCtx.importLoading"
                icon="Upload"
                v-hasPermit="['wms-order:requirement:save']"
              >
                导入
              </el-button>
            </el-upload>
            <el-button
              type="success"
              v-hasPermit="['wms-order:requirement:list']"
              :loading="orderCtx.exportLoading"
              icon="Download"
              @click="orderCtx.export()"
            >
              导出
            </el-button>
            <!-- <el-button type="primary" v-hasPermit="['wms-order:requirement:save']" icon="Plus" @click="orderCtx.showEdit()">
              添加
            </el-button> -->
          </span>
        </div>
      </template>
      <template #num="scope">
        {{ importCtx.other.getBoxNum(scope.row.blueprintName) }}
      </template>
      <template #operation="scope">
        <el-button
          type="info"
          v-hasPermit="['wms-order:requirement:save']"
          link
          size="small"
          icon="Search"
          @click="orderCtx.other.getDetail(scope.row)"
        >
          变更记录
        </el-button>
        <el-button
          type="primary"
          v-hasPermit="['wms-order:requirement:save']"
          link
          size="small"
          icon="Edit"
          @click="orderCtx.other.showEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
          v-hasPermit="['wms-order:requirement:del']"
          type="danger"
          link
          size="small"
          icon="Delete"
          @click="orderCtx.del(scope.row.id)"
        >
          删除
        </el-button>
      </template>
      <template #after>
        <el-dialog
          v-model="orderCtx.editVisible"
          :title="orderCtx.editAction + orderCtx.title"
          width="90%"
          top="3vh"
          append-to-body
          :close-on-click-modal="false"
          @close="orderCtx.closeEdit()"
        >
          <el-form
            :ref="(e) => (orderCtx.formRef = e)"
            :model="orderCtx.editData"
            :rules="orderCtx.rules"
            v-loading="orderCtx.editLoading"
            label-width="120px"
            class="demo-ruleForm"
          >
            <!-- <el-form-item label="项目" prop="projectName">
              <el-select v-model="orderCtx.editData.projectName" filterable allow-create placeholder="请选择项目"
                @change="orderCtx.other.handelProjectChange">
                <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item> -->
            <zlrt-table :p="orderGoodsCtx">
              <template #skuName="scope">
                <!-- <el-select
                  style="width: 570px;"
                  v-model="scope.row.skuName"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="getGoodsList"
                  :loading="loading"
                  @change="orderCtx.other.handleSkuChange($event, scope)"
                >
                  <el-option
                    v-for="item in goodsOptions"
                    :key="item.id"
                    :label="item.skuName"
                    :value="item.skuName"
                  />
                </el-select> -->
                {{ scope.row.skuName }}
              </template>
              <template #number="scope">
                {{ scope.row.number }}
              </template>
              <template #number1="scope">
                <el-input style="width: 100%" v-model="scope.row.number1" />
              </template>
              <template #operation="scope">
                <el-button
                  type="primary"
                  link
                  size="small"
                  icon="Edit"
                  @click="changeGoods(scope.row)"
                >
                  修改
                </el-button>
                <el-button
                  type="danger"
                  link
                  size="small"
                  icon="Delete"
                  @click="delGoods(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </zlrt-table>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="orderCtx.editVisible = false">取消</el-button>
              <!-- <el-button type="primary" @click="orderCtx.save()"
                >确定</el-button
              > -->
            </span>
          </template>
        </el-dialog>
      </template>
    </zlrt-table>

    <!--导入-->
    <el-dialog
      v-model="importCtx.editVisible"
      :title="importCtx.title"
      width="90%"
      append-to-body
      :close-on-click-modal="false"
      top="3vh"
    >
      <el-form
        :model="importCtx.editData"
        :rules="importCtx.rules"
        :ref="(e) => (importCtx.formRef = e)"
        label-width=" 120px"
      >
        <el-row id="import-top">
          <el-col :span="24">
            <el-form-item label="项目" prop="projectName">
              <el-select
                v-model="importCtx.editData.projectName"
                filterable
                placeholder="请选择项目"
                style="width: 100%"
                @change="importCtx.other.handelProjectChange"
              >
                <el-option
                  v-for="item in projectOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="18">
            <el-form-item label="柜号" prop="code">
              <el-input v-model="importCtx.editData.blueprintName" placeholder="逗号分隔，如 G1,G2,G3" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="18">
            <el-form-item label="图纸名称" prop="blueprintName">
              <el-input v-model.trim="importCtx.editData.blueprintName" placeholder="按逗号，分号，除号分隔，如：(G1,G2)(G1;G2)(G1/G2)" />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <el-divider content-position="center">物料明细</el-divider>
      <!-- <div style="margin-bottom: 10px;">
        <el-button type="primary" icon="Plus" @click="importCtx.other.addGoodList()"> 添加 </el-button>
      </div> -->
      <zlrt-table :p="importCtx" :addRequest="addRequest">
        <template #expand="scope1">
          <div class="sku-search">
            <el-row>
              <!-- <el-col :span="8">
                <el-input v-model="scope1.row.searchSkuName" @blur="importCtx.other.searchSku(scope1.row)"
                  @keyup.enter="importCtx.other.searchSku(scope1.row)" />
              </el-col> -->
              <el-col :span="24">
                <el-input
                  v-model="scope1.row.searchSpecification"
                  @blur="importCtx.other.searchSku(scope1.row)"
                  @keyup.enter="importCtx.other.searchSku(scope1.row)"
                />
              </el-col>
            </el-row>
          </div>
          <el-table
            :data="importCtx.other.getData(scope1.row.goodsList)"
            style="width: 95%; float: right"
            header-cell-class-name="childheader"
            :loading="importCtx.searchLoading"
          >
            <el-table-column prop="skuName" label="物料名称"></el-table-column>
            <el-table-column
              prop="barCode"
              label="物料编码"
              width="120"
            ></el-table-column>
            <el-table-column prop="specification" label="规格型号" width="200">
              <template #default="scope">
                {{ scope.row.specification || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="库存总数" width="100">
              <template #default="prop">
                {{ prop.row.number }}
              </template>
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="90"
            ></el-table-column>
            <el-table-column label="项目占用" width="100" align="center">
              <template #default="prop">
                <el-popover :width="900" trigger="click" v-if="prop.row.number">
                  <template #reference>
                    <el-button
                      v-if="prop.row.number"
                      type="primary"
                      size="small"
                      text
                      @click="importCtx.other.getList(prop)"
                      >详情</el-button
                    >
                  </template>
                  <el-table :data="tempInventoryList" v-if="prop.row.number">
                    <el-table-column prop="projectName" label="项目名称" />
                    <el-table-column width="150" prop="number" label="数量" />
                    <el-table-column width="100" prop="unit" label="单位" />
                  </el-table>
                </el-popover>
                <el-button
                  v-if="prop.row.number"
                  link
                  type="primary"
                  size="small"
                  @click="addRemark(prop, scope1)"
                  >添加备注</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="needNumber" label="需求数量" width="120">
              <template #default="prop">
                <el-input
                  v-model.trim="prop.row.needNumber"
                  style="width: 90px"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="requestNumber"
              label="请购数量"
              width="120px"
            >
              <template #default="prop">
                <el-input
                  v-model.trim="prop.row.requestNumber"
                  style="width: 90px"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
              <template #default="scope">
                <el-input
                  type="textarea"
                  v-model.trim="scope.row.remark"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </zlrt-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importCtx.other.exportGoodsList()">导出</el-button>
          <el-button @click="importCtx.editVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="finishLoading"
            :disabled="!importCtx.data?.length"
            @click="importCtx.other.submit()"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="orderChangeVisible"
      title="物料清单变更记录"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table :data="orderChangeList" :loading="orderChanggLoading">
        <el-table-column prop="skuName" label="物料名称"></el-table-column>
        <el-table-column
          prop="barCode"
          label="物料编码"
          width="120"
        ></el-table-column>
        <el-table-column prop="specification" label="规格型号" width="200">
          <template #default="scope">
            {{ scope.row.specification || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="90"></el-table-column>
        <!-- <el-table-column prop="number" label="数量" width="120"> </el-table-column> -->
        <el-table-column prop="baddDelete" label="变更方式" width="120">
          <template #default="scope">
            <div :class="scope.row.baddDelete ? 'red' : 'green'">
              {{ scope.row.baddDelete ? "删除" : "新增" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createOn" label="变更日期" width="170">
          <template #default="scope">
            {{ formatDate(scope.row.createOn) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <goods-change
      :searchObj="searchObj"
      @closeDialog="closeDialog"
      @changedGood="changedGood"
    ></goods-change>
  </u-container-layout>
</template>

<script lang="ts" src="./requirement" />

<style lang="scss">
.tableRowClassName {
  /* border: solid red 1px;
  background-color: red; */
  color: blue;
  font-weight: bold;
}

.childheader {
  padding: 0 !important;
  background-color: #ffd !important;
  height: 25px !important;
}

.sku-search .el-input {
  padding: 0 10px;
}

.sku-search input {
  color: #060;
}

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  div {
    padding-left: 10px;
  }
}

.red {
  color: #f56c6c;
}

.green {
  color: #67c23a;
}
</style>
